<template>
  <div class="community">
    <!-- 导航栏开始 -->
    <div class="navbar">
      <mt-navbar v-model="active">
        <mt-tab-item id="lifeShare" @click.native="link1">自如生活</mt-tab-item>
        <mt-tab-item id="privateRenting" @click.native="link2"
          >个人房源</mt-tab-item
        >
        <mt-tab-item id="roommate" @click.native="link3">找室友</mt-tab-item>
        <mt-tab-item id="groupChat" @click.native="link4">被窝夜话</mt-tab-item>
      </mt-navbar>
    </div>
    <!-- 导航栏结束 -->

    <!-- 内容开始 -->
    <div class="container">
      <mt-tab-container v-model="active">
        <!-- 日常分享开始 -->
        <mt-tab-container-item id="lifeShare">
          <div class="roommate-div2">
            
            
            <div >
              <img class="img1" src="../assets/img/展示.jpg" alt=""></div>
           <div class="img2">
              <img class="img2" src="../assets/img/深呼吸.png" alt="">
            </div>
            <div class="p1">
               <p>从家具板材、装修材料、施工管理、空气质量管理、空置期设置等维度提升产品品质</p>
            </div>
           
          </div>
         

          <router-view></router-view>
          <h3>住房分享</h3>
          <LifeShare></LifeShare>
        </mt-tab-container-item>
        <!-- 日常分享结束 -->

        <!-- 个人房源开始 -->
        <mt-tab-container-item id="privateRenting">
           <div class="roommate-div3">
             <div class="">
               <img class="img1" src="../assets/img/log.png" alt="">
             </div>
          </div>
          <PrivateRoom></PrivateRoom>
          <router-view></router-view>
        </mt-tab-container-item>
        <!-- 个人房源结束 -->

        <!-- 找室友开始 -->
        <mt-tab-container-item id="roommate">
          <div class="roommate-div1">
            <img src="../assets/img/警告.png" alt="">
            <p>警告！ 不得利用承租房屋从事非法经营、非法宗教活动。</p>
          </div>
          <Roommate v-for="i of 5" :key="i"></Roommate>

          <!-- <router-view></router-view> -->
        </mt-tab-container-item>
        <!-- 找室友结束 -->

        <!-- 群聊开始 -->
        <mt-tab-container-item id="groupChat">
          <mt-button type="danger" size="large">创建群聊</mt-button>
          <!-- 引入组件无法继承样式 -->
          <GroupCHat></GroupCHat>
          <!-- 预览内容封装例子没啥大用  ↓-->
      
        </mt-tab-container-item>
        <!-- 群聊结束 -->
      </mt-tab-container>
    </div>
    <!-- 内容结束 -->

    <!-- 博客按钮开始 -->
    <van-button v-if="active=='lifeShare'"
      class="blog"
      size="large"
      type="danger"
      v-show="blog"
      @click="popBack"
    >
      <img src="../assets/imgs/d1/biji.png" alt="" />
    </van-button>
    <van-button v-else-if="active=='privateRenting'"
      class="blog"
      size="large"
      type="primary"
      v-show="blog"
      @click="popBack"
    >
      <img src="../assets/imgs/d1/biji.png" alt="" />
    </van-button>
    <van-button v-else-if="active=='roommate'"
      class="blog"
      size="large"
      type="info"
      v-show="blog"
      @click="popBack"
    >
      <img src="../assets/imgs/d1/biji.png" alt="" />
    </van-button>
    <!-- <van-button v-else
      class="blog"
      size="large"
      type="warning"
      v-show="blog"
      @click="popBack"
    >
      <img src="../assets/imgs/d1/biji.png" alt="" />
    </van-button> -->
    <!-- 博客按钮结束 -->

    <mt-popup v-model="popupVisible" position="right" id="bk-sty">
      <mt-header title="博客">
        <router-link to="/community" slot="left">
          <mt-button icon="back" @click="popBack"></mt-button>
        </router-link>
      </mt-header>
      <div class="all">
        <mt-field
          label="  标题"
          placeholder="简述一下对房子或室友的期望"
          v-model="username"
        ></mt-field>
        <mt-field
          label="位置"
          placeholder="想要居住的位置"
          v-model="location"
        ></mt-field>
        <mt-field
          label="预算(元/月)"
          placeholder="输入心里价位"
          v-model="price"
        ></mt-field>
        <div class="addpic">
          <div class="add">
            <img
              src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2375920824,1229333302&fm=26&gp=0.jpg"
            />
          </div>
          <div class="text">
            <span>添加图片,与你相关的都大胆秀出来吧</span>
          </div>
        </div>
        <div class="other">
          <div>
            <span class="black">其他说明</span>
          </div>
          <div>
            <span> 其他补充说明,非必填 </span>
          </div>
          <div>
            <span> (提示:请勿随意留下您的联系方式,避免骚扰) </span>
          </div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import LifeShare from "../components/LifeShare.vue";
import PrivateRoom from "../components/PrivateRoom";
import GroupCHat from "../components/GroupChat";
import Search from "../components/Search.vue";
import Roommate from '../components/Roommate';
export default {
  components: {
    PrivateRoom,
    LifeShare,
    GroupCHat,
    Search,
    Roommate,
  },
  data() {
    return {
      selected: "1",
      // 导航状态
      active: "lifeShare",
      // 导航列表
      navbarList: [],
      // 博客弹窗状态
      popupVisible: false,
      blog: false,

      username: "",
      location: "",
      rangeValue: "",
      price: "",
    };
  },
  methods: {
    //添加图片
    onAdd() {},
    link1() {
      // this.$router.push({name:"lifeshare"})
    },
    link2() {
      // this.$router.push({name:"privatroom"})
    },
    link3() {
      // this.$router.push("./community")
    },
    link4() {
      // this.$router.push("./community")
    },
    // 弹框
    popBack() {
      this.popupVisible = !this.popupVisible;
    },

    ...mapMutations(["setActiveCommunity"]),
  },
  computed: {
    //  ...mapState(['active'])
    activeCommunity: {
      get() {
        return this.$store.state.activeCommunity;
      },
      set(val) {},
    },
    dataUser: {
      get() {
        return this.$store.state.dataUser;
      },
      set(val) {},
    },
  },
  mounted() {
    this.blog = this.dataUser;
  },
  // watch:{
  //   active(){
  //     console.log(this.active)
  //   }
  // }
  
};
</script>
<style lang="less" scoped >
// 导航栏样式
.community .navbar {
  position: fixed;
  width: 100%;
  z-index: 999;
  top: 0;
}

.community .mint-navbar .mint-tab-item.is-selected  {
border-bottom: 3px solid #007d65;
    color: #007d65;
    margin-bottom: -3px;
    
}

.community .container {
  margin-top: 3.5rem;
}
/* 博客弹框样式 */
.community .mint-popup-right {
  background-color: #e8e8e8;
  height: 100%;
  width: 100%;
}
/* 博客按钮 */
.community .blog {
  position: fixed;
  bottom: 4.5rem;
  border-radius: 100%;
  width: 3rem;
  height: 3rem;
  right: 1rem;
  font-size: 2rem;
  padding-top: 5px;
  // box-shadow: 0px 0px 7px red;
}
.community .mint-tab-container-item h3 {
  border-left: solid 3px #007d65;
  margin-left: 0.4rem;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
  padding-left: 4px;
  
}

.mint-cell {
  margin: 5px 6px;
}

.mint-cell .mint-cell-wrapper {
  background-color: indianred;
}

.groupChat-span {
  font-size: 17px;
  font-weight: 400;
  color: #1e1e1e;

  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
  width: 264px;
  margin-bottom: 17px;
}
.mint-cell-title {
  width: 105px;
  height: 105px;
  margin: 6px;
}
.roommate-div {
  width: 342px;
  height: 100px;
  border: 1px solid;
  margin: auto;
  text-align: center;
}
.roommate-img {
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 16px;
}
.all{
  background-color: #fff;
  .addpic {
  display: flex;
  justify-content: space-between;
  .add {
    width: 80px;
    height: 80px;
    border: 1px solid black;
    margin: 8px;
    img {
      width: 100%;
    }
  }
  .text {
    margin-right: 5px;
    margin-top: 30px;
    span {
      color: gray;
    }
  }
}
.other {
  height: 100px;
  .black {
    color: black;
    font-size: 18px;
    font-weight: 600;
  }
  span {
    color: gray;
    margin-top: 10px;
  }
}
}
.roommate-div1 {
  
  width: 342px;
  height: 60px;
  border-radius:25px;
  margin: auto;
  text-align: center;
  background-color: #f6f6f6;
  img{
    position: absolute;
    width: 21px;
    height: 21px;
    top: 11px;
    left: 28px;
  }
  p{
    position: absolute;
    padding-left: 39px;
    padding-right: 24px;
    text-align: left;
    margin-top: 10px;
  }
}
.roommate-div2 .img1{
  width: 100%;
  height: 130px;
  
}
.roommate-div2 {
  width: 100%;
  height: 130px;
display: flex;
  margin: auto;
  text-align: center;
}
.roommate-div2 .img2{
  
  width: 100%;
  height: 130px;
  position: absolute;
    width: 282px;
    height: 45px;
    top: 7px;
    left: 23px;
}
.roommate-div2 .p1{
     position: absolute;
    color: #fff;
    top: 72px;
    left: 5px;
    font-size: 12px;
    padding: 1px 42px;
}
.roommate-div3 {
  width: 100%;
  height: 80px;
display: flex;
  margin: auto;
  text-align: center;
  background: #007d65;
;
}
.roommate-div3 .img1{
  width: 100%;
  background-color: #007d65;
 
}
</style>